{% extends 'basic.html' %}
{% load static %}
{% block title %} 短信登录{% endblock %}

{% block css %}
  <link rel="stylesheet" href="{% static 'css/account.css' %}">
  <style>
  .error-msg{
      color: #ff0000;
      position: absolute;
  }
  </style>
 {% endblock %}


{% block content %}
  <div class="container">
 <div class="account">
        <div class="title">用户短信登录</div>
        <form id="smsForm" method="POST" novalidate>
            {% csrf_token %}
            {% for field in form %}
                {% if field.name == 'code' %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        <div class="row">
                            <div class="col-xs-7">
                                {{ field }}
                                <span class="error-msg"></span>
                            </div>
                            <div class="col-xs-5">
                                <input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码" >
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }}
                        <span class="error-msg"></span>
                    </div>
                {% endif %}
            {% endfor %}
               <div>
              <div style="float: right">
                <a href="{% url 'web_login' %}">账号密码登录</a>
              </div>
            </div>
            <div class="row">
                <div class="col-xs-3">
                    <input id="btnSubmit" type="button" class="btn btn-primary" value="登  陆"/>
                </div>
            </div>
        </form>
    </div>
</div>




{% endblock %}
{% block js %}
<script>
   // 页面框架加载完成就会自动执行函数
   $(function (){
       // 执行函数
       bindCkickbtnSms();
       bindClickSubmit();

   });

  /* 登录绑定事件*/
    function bindClickSubmit(){

        $('#btnSubmit').click(function (){
            $('.error-msg').empty()
            //收集表单数据(找到每一个字段)
            //$('#regForm').serialize() //包含所有字段数据  +srftoken
            //ajax发送到后来
            $.ajax({
                url:"{% url 'web_login_sms' %}",
                type: "POST",
                data:$('#smsForm').serialize(),//包含所有字段数据  +srftoken
                dataType: "JSON",
                success:function (res){
                    if (res.status){
                        console.log(res)
                    location.href = res.data;
                    }else{
                        console.log(res)
                         $.each(res.error,function (key,value){  //each这里表示循环字典
                           $("#id_"+key).next().text(value[0]);  //网id下一个元素的span标签写错误信息
                       })
                    }
                }

            })

        })
    };
   /*
     点击验证码绑定事件
    */
   function bindCkickbtnSms(){
       $('.error-msg').empty()
       $('#btnSms').click(function (){
           //获取用户手机号
           //找到输入框id。获取id
           {#alert($('#id_phone').val());#}//测试看看,显示在网页
           var phone = $('#id_phone').val();

           //发送ajax请求
           $.ajax({
               url:"{% url 'web_send_sms' %}",//等价于/send/sms
               type:"GET",
               data:{phone:phone,tql:"login"},
               dataType:"JSON",  //将服务端返回的数据为字典
               success:function (res){
                   //请求成功后，自动回调函数
                   if(res.status){
                       {#console.log("发送成功,倒计时")#}
                       sendSmsRemind();

                   }else{
                       //显示错误信息
                       console.log(res); //查看他的信息，{status:False,error:{mobile_phone:{“错误信息”}}}
                       $.each(res.error,function (key,value){  //each这里表示循环字典
                           $("#id_"+key).next().text(value[0]);  //网id下一个元素的span标签写错误信息
                       })
                   }


               }

           })





       })
   };
 /*
 * 倒计时函数*/
    function sendSmsRemind(){
        var $btnSm = $('#btnSms');
        $btnSm.prop('disabled',true);
        var time=60;
        var remind= setInterval(function (){
            $btnSm.val(time+'秒重新发送');
            time = time -1;
            if (time<1){
                clearInterval(remind);
                $btnSm.val('点击获取验证码').prop('disabled', false);
            }
        },1000)
    };




</script>
{% endblock %}
